<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>疫情监控</title>
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/china.js"></script>
    <link href="../static/css/main.css" rel="stylesheet"/>
</head>
<body onload="show()">
<div id="nowDiv"></div>
<div id="title">全国新冠疫情实况</div>
<div id="l2"></div>
<div id="c1">
    <div class="num">
        <h1>{{ center_list.confirm }}</h1>
    </div>
    <div class="num">
        <h1>{{ center_list.nowConfirm }}</h1>
    </div>
    <div class="num">
        <h1>{{ center_list.heal }}</h1>
    </div>
    <div class="num">
        <h1>{{ center_list.dead }}</h1>
    </div>
    <div class="txt">
        <h2>累积确诊</h2>
    </div>
    <div class="txt">
        <h2>现有确诊</h2>
    </div>
    <div class="txt">
        <h2>累积治愈</h2>
    </div>
    <div class="txt">
        <h2>累积死亡</h2>
    </div>
</div>
<div id="c2"></div>
<div id="r1"></div>
</body>

{#右边#}
<script>
    var ec_right1 = echarts.init(document.getElementById('r1'), "dark");
    var data = [{% for k ,v in topdata.items() %}'{{k}}',{% endfor %}]
    var value = [{% for k ,v in topdata.items() %}'{{v}}',{% endfor %}]

    var option_right1 = {
        title: {
            text: '全国城市确诊TOP10',
            // subtext: '模拟数据',
            // x: 'center',
            textStyle: {},
            left: 'left'
        },
        backgroundColor: 'rgba(255, 255, 255, 0)',
        xAxis: {
            type: 'category',
            data: data
        },
        yAxis: {
            type: 'value'
        },

        label: {
            show: true,  //开启显示
            position: 'top',  //在上方显示
            textStyle: {  //数值样式
                color: 'black',
                fontSize: 16
            }
        },

        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        series: [{
            data: value,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
            }
        }]
    };
    ec_right1.setOption(option_right1);


</script>

{#地图#}
<script>
    //初始化echarts实例
    var ec_center = echarts.init(document.getElementById("c2"), "dark");
    var optionMap = {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        title: {
            text: '',
            subtext: '',
            x: 'left'
        },
        tooltip: {
            trigger: 'item'
        },
        //左侧小导航图标
        visualMap: {
            show: true,
            x: 'left',
            y: 'bottom',
            textStyle: {
                fontSize: 8
            },
            splitList: [{
                start: 1,
                end: 9
            },
                {
                    start: 10,
                    end: 99
                },
                {
                    start: 100,
                    end: 999
                },
                {
                    start: 1000,
                    end: 9999
                },
                {
                    start: 10000
                }
            ],
            color: ['#8A3310', '#C64918', '#E55B25', '#F2AD92', '#F9DCD1']
        },

        //配置属性
        series: [{
            name: '累积确诊人数',
            type: 'map',
            mapType: 'china',
            roam: false,
            itemStyle: {
                normal: {
                    borderWidth: .5,
                    borderColor: '#009fe8',
                    areaColor: '#ffefd5'
                },
                emphasis: {
                    borderWidth: .5,
                    borderColor: '#4b0082',
                    areaColor: '#fff'
                }
            },
            label: {
                normal: {
                    show: true, //省份名称
                    fontSize: 8
                },
                emphasis: {
                    show: true,
                    fontSize: 8
                }
            },
            data: [
                {% for k,v in chian_data.items() %}
                    {value: {{v}}, name: '{{k}}'},
                {% endfor %}
            ]
        }]
    };

    //使用制定的配置项和数据显示图表
    ec_center.setOption(optionMap);
</script>

{#左边#}
<script>
    var ec_left2 = echarts.init(document.getElementById("l2"),"dark");

var option_left2 = {

      	backgroundColor:'rgba(255, 255, 255, 0)',

      	title: {
      		text: '全国确诊与治疗',

			textStyle: {

			},
			left: 'left'
      	},

      	legend: {
      		// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
      		// orient: 'horizontal',
      		// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
      		// x: 'left',
      		// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
      		// y: 'top',
      		data: ['累计确诊', '累计治疗'],
			left: 'center'
      	},

      	//  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
      	grid: {
      		top: 50, // 等价于 y: '16%'
      		left: '4%',
      		right: '6%',
      		bottom: '4%',
      		containLabel: true
      	},

      	// 提示框
      	tooltip: {
      		trigger: 'axis',
			axisPointer: {
				type: 'line',
				lineStyle: {
					color: '#7171C6'
				}
			}
      	},
        label: {
            show: true,  //开启显示
            position: 'top',  //在上方显示
            textStyle: {  //数值样式
                color: 'black',
                fontSize: 16
            }
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
      	xAxis: {
      		// name: '周几',
      		type: 'category',
      		// axisLine: {
      		// 	lineStyle: {
      		// 		// 设置x轴颜色
      		// 		color: '#912CEE'
      		// 	}
      		// },
      		// // 设置X轴数据旋转倾斜
      		// axisLabel: {
      		// 	rotate: 30, // 旋转角度
      		// 	interval: 0 //设置X轴数据间隔几个显示一个，为0表示都显示
      		// },
      		// // boundaryGap值为false的时候，折线第一个点在y轴上
      		// boundaryGap: false,
      		data: {{ a|tojson }}
      	},

      	yAxis: {
      		// name: '数值',
      		type: 'value',
      		// min: 0, // 设置y轴刻度的最小值
      		// max: 1800, // 设置y轴刻度的最大值
      		// splitNumber: 9, // 设置y轴刻度间隔个数
      		axisLine: {
				show: true
      			// lineStyle: {
      			// 	// 设置y轴颜色
      			// 	color: '#87CEFA'
      			// }
      		},
			axisLabel: {
				show: true,
				color: 'white',
				fontSize: 12,
				formatter: function(value) {
					if (value >= 1000) {
						value = value / 1000 + 'k';
					}
					return value;
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#172738',
					width: 1,
					type: 'solid'
				}
			}
      	},

      	series: [{
      			name: '累计确诊',
      			data: {{b|tojson}},
      			type: 'line',
      			// 设置小圆点消失
      			// 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
      			// symbol: 'none',
      			// 设置折线弧度，取值：0-1之间
      			smooth: true
      		},

      		{
      			name: '累计治疗',
      			data: {{c|tojson}},
      			type: 'line',
      			// 设置折线上圆点大小
      			smooth: true
      		}
      	]

      	// color: ['#00EE00', '#FF9F7F', '#FFD700']
      };

ec_left2.setOption(option_left2);

</script>



<script>
function show(){
var date = new Date(); //日期对象
var now = "";
now = date.getFullYear()+"年"; //读英文就行了
now = now + (date.getMonth()+1)+"月"; //取月的时候取的是当前月-1如果想取当前月+1就可以了
now = now + date.getDate()+"日";
now = now + date.getHours()+"时";
now = now + date.getMinutes()+"分";
now = now + date.getSeconds()+"秒";
document.getElementById("nowDiv").innerHTML = now; //div的html是now这个字符串
setTimeout("show()",1000); //设置过1000毫秒就是1秒，调用show方法
}
</script>
</html>
